import React, { memo, useEffect } from 'react'
import { ArchivesListWrapper } from '@/components/b_archives_list/style'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import {
  getArticleClassifyAction,
  getBlogArticleListAction
} from '@/store/blog/actionCreators'
import moment from 'moment'
import { NavLink } from 'react-router-dom'

function B_ArchivesList(props) {
  const { userId } = props
  const dispatch = useDispatch()

  useEffect(() => {
    userId && dispatch(getArticleClassifyAction(userId))
    userId && dispatch(getBlogArticleListAction(userId, 0, 1000))
  }, [dispatch, userId])

  const { classify = [], articleList = [] } = useSelector(
    (state) => ({
      classify: state.blogReducer.getIn(['classify']),
      articleList: state.blogReducer.getIn(['articleList'])
    }),
    shallowEqual
  )

  return (
    <ArchivesListWrapper>
      <h2 className="text-center text-bolder base-color fs-8">归档</h2>
      <div className="wj-classify">
        <h3 className="text-bolder py-6 fs-5 text-bolder classify">分类</h3>
        <ul className="pt-3">
          {classify.length > 0 &&
            classify.map((item) => {
              return (
                <li className="classify-item px-4" key={item.classify}>
                  <NavLink
                    to={`/blog/category/u/${userId}/${item.id}?classify=${item.classify}`}
                    className="fs-3"
                  >
                    {item.classify}
                    <span>({item.count})</span>
                  </NavLink>
                </li>
              )
            })}
        </ul>
      </div>
      <div className="more">
        <h3 className="text-bolder py-6 mt-8 fs-5 text-bolder blog-list">
          列表
        </h3>
        <ul className="pt-2 list">
          {articleList.length > 0 &&
            articleList.map((item) => {
              return (
                <li key={item.key} className="py-4">
                  <span className="fs-1 timer">
                    {moment(item.createTime).format('YYYY/MM/DD')}
                  </span>
                  <NavLink
                    to={`/blog/detail?id=${item.key}`}
                    className="title pl-5 fs-3"
                  >
                    {item.title}
                  </NavLink>
                </li>
              )
            })}
        </ul>
      </div>
    </ArchivesListWrapper>
  )
}

export default memo(B_ArchivesList)
